<template>
	<view class="emergency-container">
		<view class="header-section">
			<view class="emergency-title">
				<u-icon name="warning-fill" color="#ff4d4f" size="32"></u-icon>
				<text>紧急报障</text>
			</view>
			<view class="emergency-subtitle">
				我们将优先处理您的紧急故障
			</view>
		</view>

		<view class="form-section">
			<u-form :model="form" ref="uForm">
				<u-form-item label="联系人" prop="name" required>
					<u-input v-model="form.name" placeholder="请输入联系人姓名"></u-input>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone" required>
					<u-input v-model="form.phone" placeholder="请输入联系电话"></u-input>
				</u-form-item>
				<u-form-item label="故障地址" prop="address" required>
					<u-input v-model="form.address" placeholder="请输入详细地址"></u-input>
				</u-form-item>
				<u-form-item label="故障类型" prop="faultType" required>
					<u-radio-group v-model="form.faultType">
						<u-radio v-for="(item, index) in faultTypes" :key="index" :name="item.value">
							{{item.label}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="故障描述" prop="description" required>
					<u-textarea v-model="form.description" placeholder="请详细描述故障情况，以便我们及时处理"></u-textarea>
				</u-form-item>
				<u-form-item label="图片上传" prop="images">
					<u-upload
						:fileList="form.images"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="4"
					></u-upload>
				</u-form-item>
			</u-form>
		</view>

		<view class="notice-section">
			<view class="notice-title">
				<u-icon name="info-circle" color="#1296db" size="28"></u-icon>
				<text>温馨提示</text>
			</view>
			<view class="notice-content">
				<text>1. 紧急报障服务24小时响应</text>
				<text>2. 我们将在30分钟内与您联系</text>
				<text>3. 请保持电话畅通</text>
				<text>4. 如遇特殊情况，将优先处理威胁人身安全的故障</text>
			</view>
		</view>

		<view class="contact-section">
			<view class="contact-title">紧急服务热线</view>
			<view class="contact-number" @click="makePhoneCall">
				<u-icon name="phone" size="36" color="#1296db"></u-icon>
				<text>400-123-4567</text>
			</view>
		</view>

		<view class="submit-section">
			<u-button type="error" @click="submitForm">提交紧急报障</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				phone: '',
				address: '',
				faultType: '',
				description: '',
				images: []
			},
			faultTypes: [{
				label: '设备漏水',
				value: 'leak'
			}, {
				label: '异常噪音',
				value: 'noise'
			}, {
				label: '完全不出水',
				value: 'noWater'
			}, {
				label: '水质异常',
				value: 'quality'
			}, {
				label: '其他紧急故障',
				value: 'other'
			}],
			rules: {
				name: [{
					required: true,
					message: '请输入联系人姓名',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: ['blur', 'change']
				}],
				address: [{
					required: true,
					message: '请输入故障地址',
					trigger: ['blur', 'change']
				}],
				faultType: [{
					required: true,
					message: '请选择故障类型',
					trigger: ['blur', 'change']
				}],
				description: [{
					required: true,
					message: '请描述故障情况',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	methods: {
		afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			const { file } = event.detail
			// 上传图片
			this.uploadFilePromise(file).then(res => {
				let files = [].concat(file)
				files.map(item => {
					this.form.images.push({
						url: item.url,
						status: 'success',
						message: '上传成功'
					})
				})
			}).catch(err => {
				uni.$u.toast('上传失败')
			})
		},
		uploadFilePromise(file) {
			return new Promise((resolve, reject) => {
				// 模拟上传
				setTimeout(() => {
					resolve(file)
				}, 1000)
			})
		},
		deletePic(event) {
			this.form.images.splice(event.index, 1)
		},
		makePhoneCall() {
			uni.makePhoneCall({
				phoneNumber: '4001234567'
			})
		},
		submitForm() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showLoading({
						title: '提交中...'
					})
					
					// 模拟提交
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}, 2000)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.emergency-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.header-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		text-align: center;

		.emergency-title {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10rpx;

			text {
				font-size: 36rpx;
				font-weight: bold;
				margin-left: 10rpx;
				color: #ff4d4f;
			}
		}

		.emergency-subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	.form-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.notice-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.notice-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}

		.notice-content {
			text {
				display: block;
				font-size: 28rpx;
				color: #666;
				line-height: 1.8;
			}
		}
	}

	.contact-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;

		.contact-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 10rpx;
		}

		.contact-number {
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 36rpx;
				font-weight: bold;
				color: #1296db;
				margin-left: 10rpx;
			}
		}
	}

	.submit-section {
		padding: 40rpx 20rpx;
	}
}
</style>
